Aardvark Firefox Extension
The Aardvark bookmarklet is a tool for web developers/designers as well as casual users. To quickly see it in action on this page, run the demo.
Using Aardvark
Once you have installed Aardvark as a bookmarklet (it takes about ten seconds!), you may start it at any time by selecting it from the bookmarks menu or toolbar. Aardvark will run until you press the “Q” key to quit, or leave the page or refresh it.
As you glide the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. Pressing certain keys on the keyboard (see below) will do various things, as described in the Keystroke list below.
The Keystrokes
You can then press certain keys on the keyboard (as indicated below) to do various things, such as delete the selected element from the page, isolate the element, or move the selection rectangle outward to the containing element. If you forget them, no problem: just remember to press "h" for help.
| W | Wider | Select a wider area. For instance, if you have selected a table cell, pressing W will select the table row |
|---|---|---|
| N | Narrower | Undo the last "Wider" command |
| Q | Quit | Quit Aardvark (that is, stop selecting elements), until you restart it from the menu |
| U | Undo | Undo the last "remove" or "isolate" command. |
| R | Remove | Delete the selected element |
| I | Isolate | Delete everything surrounding the selected element |
| B | Black on white | Set the element (and all contained elements) to be black text on white background, for readability |
| C | Colorize | Sets the element's background to a random color |
| V | View Source | Shows the source code of the element (with indenting and color highlighting) |
| J | Javascript Source | Generates Javascript code for building the element with W3C DOM techniques. Seriously powerful. |
| D | "De-widthify" | Removes any fixed width settings from the element and its children elements |
| P | Paste | Insert the last removed element before the current selected element |
| G | Global | Make a javascript global variable that points to this element, named "elem1", "elem2", etc. |
| X | XPath | Insert the XPath of the element into the Javascript Snippet editor. (what snippet editor you may ask?) | H | Help | Show (or hide) the list of keystrokes |
Aardvark was created by Rob Brown (rob@karmatics.com) in 2005.
Things You Can Do With Aardvark
- Clean up unwanted banners and surrounding "fluff," especially prior to printing a page
- See how the page is created, block by block
- View the source code of one or more elements
About the old Aardvark Firefox extension:
For now anyway, the Firefox extension is retired. The bookmarklet does everything that it did, and more.
I'm open to having someone maintain it if they want, though. I got tired of having to mess with it every time a new version of Firefox came out.